﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--导入vue 包-->
    <script src="vue/Vue.v2.6.12.js"></script>
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <!--检测登录工具-->
    <script type="text/javascript" src="js/admin.check.login.js"></script>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>管理员列表 - 管理员列表 - H-ui.admin v3.0</title>
    <meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<div id="managerForList">
    <!--_header 作为公共模版分离出去-->
    <header class="navbar-wrapper">
        <div class="navbar navbar-fixed-top">
            <div class="container-fluid cl"><a class="logo navbar-logo f-l mr-10 hidden-xs" href="/aboutHui.shtml">H-ui.admin</a>
                <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/aboutHui.shtml">H-ui</a>
                <span class="logo navbar-slogan f-l mr-10 hidden-xs">v3.0</span>
                <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
                <nav class="nav navbar-nav">
                    <ul class="cl">
                        <li class="dropDown dropDown_hover"><a href="javascript:;" class="dropDown_A"><i
                                class="Hui-iconfont">&#xe600;</i> 新增 <i class="Hui-iconfont">&#xe6d5;</i></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="javascript:;" onclick="article_add('添加资讯','article-add.html')"><i
                                        class="Hui-iconfont">&#xe616;</i> 资讯</a></li>
                                <li><a href="javascript:;" onclick="picture_add('添加资讯','picture-add.html')"><i
                                        class="Hui-iconfont">&#xe613;</i> 图片</a></li>
                                <li><a href="javascript:;" onclick="product_add('添加资讯','product-add.html')"><i
                                        class="Hui-iconfont">&#xe620;</i> 产品</a></li>
                                <li><a href="javascript:;" onclick="member_add('添加用户','member-add.html','','510')"><i
                                        class="Hui-iconfont">&#xe60d;</i> 用户</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
                <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                    <ul class="cl">
                        <li>超级管理员</li>
                        <li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">admin <i
                                class="Hui-iconfont">&#xe6d5;</i></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
                                <li><a href="#">切换账户</a></li>
                                <li><a href="#">退出</a></li>
                            </ul>
                        </li>
                        <li id="Hui-msg"><a href="#" title="消息">
                            <span class="badge badge-danger">1</span>
                            <i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a></li>
                        <li id="Hui-skin" class="dropDown right dropDown_hover"><a href="javascript:;"
                                                                                   class="dropDown_A" title="换肤"><i
                                class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
                                <li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
                                <li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
                                <li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
                                <li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
                                <li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!--/_header 作为公共模版分离出去-->

    <!--_menu 作为公共模版分离出去-->
    <aside class="Hui-aside">

        <div class="menu_dropdown bk_2">
            <dl id="menu-article">
                <dt><i class="Hui-iconfont">&#xe616;</i> 资讯管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="article-list.html" title="资讯管理">资讯管理</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-picture">
                <dt><i class="Hui-iconfont">&#xe613;</i> 图片管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="picture-list.html" title="图片管理">图片管理</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-product">
                <dt><i class="Hui-iconfont">&#xe620;</i> 产品管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="product-brand.html" title="品牌管理">品牌管理</a></li>
                        <li><a href="product-category.html" title="分类管理">分类管理</a></li>
                        <li><a href="product-list.html" title="产品管理">产品管理</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-comments">
                <dt><i class="Hui-iconfont">&#xe622;</i> 评论管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="http://h-ui.duoshuo.com/admin/" title="评论列表">评论列表</a></li>
                        <li><a href="feedback-list.html" title="意见反馈">意见反馈</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-member">
                <dt><i class="Hui-iconfont">&#xe60d;</i> 会员管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="member-list.html" title="会员列表">会员列表</a></li>
                        <li><a href="member-del.html" title="删除的会员">删除的会员</a></li>
                        <li><a href="member-level.html" title="等级管理">等级管理</a></li>
                        <li><a href="member-scoreoperation.html" title="积分管理">积分管理</a></li>
                        <li><a href="member-record-browse.html" title="浏览记录">浏览记录</a></li>
                        <li><a href="member-record-download.html" title="下载记录">下载记录</a></li>
                        <li><a href="member-record-share.html" title="分享记录">分享记录</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-admin">
                <dt class="selected"><i class="Hui-iconfont">&#xe62d;</i> 管理员管理<i
                        class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
                <dd style="display:block">
                    <ul>
                        <li><a href="admin-role.html" title="角色管理">角色管理</a></li>
                        <li><a href="admin-permission.html" title="权限管理">权限管理</a></li>
                        <li class="current"><a href="admin-list.html" title="管理员列表">管理员列表</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-tongji">
                <dt><i class="Hui-iconfont">&#xe61a;</i> 系统统计<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="charts-1.html" title="折线图">折线图</a></li>
                        <li><a href="charts-2.html" title="时间轴折线图">时间轴折线图</a></li>
                        <li><a href="charts-3.html" title="区域图">区域图</a></li>
                        <li><a href="charts-4.html" title="柱状图">柱状图</a></li>
                        <li><a href="charts-5.html" title="饼状图">饼状图</a></li>
                        <li><a href="charts-6.html" title="3D柱状图">3D柱状图</a></li>
                        <li><a href="charts-7.html" title="3D饼状图">3D饼状图</a></li>
                    </ul>
                </dd>
            </dl>
            <dl id="menu-system">
                <dt><i class="Hui-iconfont">&#xe62e;</i> 系统管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
                </dt>
                <dd>
                    <ul>
                        <li><a href="system-base.html" title="系统设置">系统设置</a></li>
                        <li><a href="system-category.html" title="栏目管理">栏目管理</a></li>
                        <li><a href="system-data.html" title="数据字典">数据字典</a></li>
                        <li><a href="system-shielding.html" title="屏蔽词">屏蔽词</a></li>
                        <li><a href="system-log.html" title="系统日志">系统日志</a></li>
                    </ul>
                </dd>
            </dl>
        </div>
    </aside>
    <div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
    </div>
    <!--/_menu 作为公共模版分离出去-->

    <section class="Hui-article-box">
        <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
            <span class="c-gray en">&gt;</span>
            管理员管理
            <span class="c-gray en">&gt;</span>
            管理员列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
                     href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
        </nav>
        <div class="Hui-article">
            <article class="cl pd-20">
                <div class="text-c">
                    <input type="text" class="input-text" style="width:250px" placeholder="输入管理员名称" :value="searchName" v-model="searchName" @input="searchByName($event)">
                    <button type="submit" class="btn btn-success" id="1" name="" @click="search"><i class="Hui-iconfont">&#xe665;</i>
                        搜用户
                    </button>

                    <button class="btn-refresh" @click="refreshManagerList()"  hidden="hidden">aa</button>
                </div>
                <div class="cl pd-5 bg-1 bk-gray mt-20">
                    <span class="l"> <a href="javascript:;" @click="dataDel()" class="btn btn-danger radius"><i
                            class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a href="javascript:;"
                                                                          @click="admin_add('添加管理员','admin-add.html','800','500')"
                                                                          class="btn btn-primary radius"><i
                            class="Hui-iconfont">&#xe600;</i> 添加管理员</a> </span>
                    <span class="r">共有数据：<strong>{{managerList.length}}</strong> 条</span>
                </div>

                <table class="table table-border table-bordered table-bg">
                    <thead>
                    <tr>
                        <th scope="col" colspan="9">员工列表</th>
                    </tr>
                    <tr class="text-c">
                        <th width="25"><input type="checkbox" id="checkbox"  v-model="checked" @change="changeAllChecked()"></th>
                        <th width="40">ID</th>
                        <th width="150">管理员名称</th>
                        <th width="90">手机</th>
                        <th width="150">邮箱</th>
                        <th>角色</th>
                        <th width="130">加入时间</th>
                        <th width="100">是否已启用</th>
                        <th width="100">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="text-c" v-for="manager in managerList">
                        <td><input type="checkbox" id="manager.managerId" :value="manager.managerId" v-model="checkedIds" ></td>
                        <td>{{manager.managerId}}</td>
                        <td>{{manager.managerName}}</td>
                        <td>{{manager.phone}}</td>
                        <td>{{manager.email}}</td>
                        <td>{{manager.roleList[0].roleName}}</td>
                        <td>{{manager.createTime}}</td>
                        <td template v-if="manager.managerStatus==1" class="td-status"><span
                                class="label label-success radius">已启用</span></td>
                        <td template v-if="manager.managerStatus==0" class="td-status"><span
                                class="label label-danger radius">已停用</span></td>
                        <td class="td-manage">
                            <a template v-if="manager.managerStatus==1" style="text-decoration:none"
                               @click="admin_stop(manager)" href="javascript:;" title="停用">
                                <i class="Hui-iconfont">&#xe631;</i>
                            </a>
                            <a template v-if="manager.managerStatus==0" style="text-decoration:none"
                               @click="admin_start(manager)" href="javascript:;" title="启用">
                                <i class="Hui-iconfont">&#xe615;</i></a>
                            <a title="编辑" href="javascript:;"
                               @click="admin_edit('管理员编辑','admin-update.html','1','800','500',manager.managerId)" class="ml-5"
                               style="text-decoration:none">
                                <i class="Hui-iconfont">&#xe6df;</i>
                            </a>
                            <a title="删除" href="javascript:;" @click="admin_del(manager)" class="ml-5"
                               style="text-decoration:none">
                                <i class="Hui-iconfont">&#xe6e2;</i>
                            </a>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </article>
        </div>


    </section>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    /*
        参数解释：
        title	标题
        url		请求的url
        id		需要操作的数据id
        w		弹出层宽度（缺省调默认值）
        h		弹出层高度（缺省调默认值）
    */
    let vm = new Vue({
        el: '#managerForList',
        data: {
            checked:false,
            managerList: [],
            checkedIds:[],
            checkArr:[],
            searchName:"",
        },
        methods: {
            /*刷新管理员列表*/
            refreshManagerList(){
                this.showAllManager();
            },
            /*通过名字查找管理员信息*/
            search(){
                let thisObj=this;
                let url='/manager/searchManagerByName.do';
                let param={managerName:this.searchName};
                console.log(param);
                postWithParams(url,param,function (data) {
                    console.log(data);
                    thisObj.managerList=data;
                })
            },
            /*input输入框赋值*/
            searchByName(event){
                let inputValue = event.currentTarget.value;
                this.searchName = inputValue;
            },
            /*展示所有管理员*/
            showAllManager() {
                console.log("查询管理员");
                let thisObj = this;
                let url = '/manager/searchAllManagers.do';
                get(url, function (data) {
                    console.log(data);
                    thisObj.managerList = data;
                })
            },
           /* 弹窗方法*/
            admin_add(title, url, w, h) {
                layer_show(title, url, w, h);
            },
            /*批量删除*/
            dataDel(){
                let thisObj=this;
                thisObj.checkedIds.forEach(function (id) {
                    let param={managerId:id};
                    let url = '/manager/deleteByManagerId.do'
                    postWithParams(url, param, function (data) {
                        console.log(data);
                        thisObj.showAllManager();
                    })
                })

            },
            /*管理员-删除*/
            admin_del(manager) {
                let thisObj=this;
                layer.confirm('确认要删除吗？', function (index) {
                    //此处请求后台程序，下方是成功后的前台处理……
                    let url = '/manager/deleteByManagerId.do';
                    let params = {
                        managerId: manager.managerId,
                    };
                    postWithParams(url, params, function (data) {
                        console.log(data);
                    thisObj.showAllManager();
                    });
                    // $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                });
            },
            /*管理员-编辑*/
            admin_edit(title, url,id, w, h,managerId) {
              url=url+'?managerId='+managerId;
                layer_show(title, url, w, h);
            },
            /*管理员-停用*/
            admin_stop(manager) {
                let thisObj=this;
                layer.confirm('确认要停用吗？', function (index) {
                    //此处请求后台程序，下方是成功后的前台处理……
                    let url = '/manager/updateManager.do';
                    let params = {
                        managerId: manager.managerId,
                        managerName: manager.managerName,
                        password: manager.password,
                        email: manager.email,
                        phone: manager.phone,
                        roleId:manager.roleId,
                        managerStatus: 0
                    };

                    // $(obj).parents("tr").find(".td-manage").prepend('<a @click="admin_start(this,id)" href="javascript:;" title="启用" style="text-decoration:none"><i class="Hui-iconfont">&#xe615;</i></a>');
                    // $(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius" >已停用</span>');
                    // $(obj).remove();
                    layer.msg('已停用!', {icon: 5, time: 1000});
                    getWithParams(url, params, function (data) {
                        console.log(data);

                        thisObj.showAllManager()
                    })
                });
            },

            /*管理员-启用*/
            admin_start(manager) {
                let thisObj=this;
                layer.confirm('确认要启用吗？', function (index) {
                    //此处请求后台程序，下方是成功后的前台处理……
                    let url = '/manager/updateManager.do';
                    let params = {
                        managerId: manager.managerId,
                        managerName: manager.managerName,
                        password: manager.password,
                        email: manager.email,
                        phone: manager.phone,
                        roleId:manager.roleId,
                        managerStatus: 1
                    };

                    // $(obj).parents("tr").find(".td-manage").prepend('<a @click="admin_stop(this,id)" href="javascript:;" title="停用" style="text-decoration:none"><i class="Hui-iconfont">&#xe631;</i></a>');
                    // $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
                    // $(obj).remove();
                    layer.msg('已启用!', {icon: 6, time: 1000});
                    getWithParams(url, params, function (data) {
                        console.log(data);

                        thisObj.showAllManager();
                    });
                });
            },
            /*全选/全不选*/
            changeAllChecked(){
                let thisObj=this;
                if (this.checked) {
                    this.managerList.forEach(function (manager) {

                        thisObj.checkArr.push(manager.managerId)
                    });
                    thisObj.checkedIds=thisObj.checkArr;
                    thisObj.checkArr=[];
                } else {
                        thisObj.checkedIds=[];
                }
            }
        },
        watch: {
            /*监听选择框*/
            "checkedIds":function () {
                    if (this.checkedIds.length==this.managerList.length){
                        this.checked=true;
                    }else {this.checked=false;}
            }
        },
        mounted: function () {
            this.showAllManager();
        }
    })
    /*管理员-增加*/
    /*function admin_add(title,url,w,h){
        layer_show(title,url,w,h);
    }
    /!*管理员-删除*!/
    function admin_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //此处请求后台程序，下方是成功后的前台处理……

            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }
    /!*管理员-编辑*!/
    function admin_edit(title,url,id,w,h){
        layer_show(title,url,w,h);
    }
    /!*管理员-停用*!/
    function admin_stop(obj,id){
        layer.confirm('确认要停用吗？',function(index){
            //此处请求后台程序，下方是成功后的前台处理……

            $(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_start(this,id)" href="javascript:;" title="启用" style="text-decoration:none"><i class="Hui-iconfont">&#xe615;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">已禁用</span>');
            $(obj).remove();
            layer.msg('已停用!',{icon: 5,time:1000});
        });
    }

    /!*管理员-启用*!/
    function admin_start(obj,id){
        layer.confirm('确认要启用吗？',function(index){
            //此处请求后台程序，下方是成功后的前台处理……

            $(obj).parents("tr").find(".td-manage").prepend('<a onClick="admin_stop(this,id)" href="javascript:;" title="停用" style="text-decoration:none"><i class="Hui-iconfont">&#xe631;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!', {icon: 6,time:1000});
        });
    }*/
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>